<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="address">
    <select name="provice" id="provice">
      <!-- <option value="河南省">河南省</option> -->
    </select>
    <select name="city" id="city">
      <!-- <option value="郑州市">郑州市</option> -->
    </select>
    <select name="area" id="area">
      <!-- <option value="二七区">二七区</option> -->
    </select>
  </div>

  <script>
    var arr = ['1', 2, 3, 89, 99, 45, '周六', 'a,b,c', 72, 'def'];
    /*  arr.sort(function (a, b) {
     *  return a - b;
     * })
     * console.log(arr);
     */

    //  填充数组
    // arr.fill('a,b,c', 3, 6);
    // console.log(arr);

    // 颠倒数组
    // arr.reverse();
    // console.log(arr);

    //  splice 添加和删除数组
    // 删除
    // arr.splice(3,2);
    // console.log(arr);
    // 删除并添加
    // arr.splice(2, 5, 10, 23, 98);
    // console.log(arr);

    // slice 取出指定范围内的元素到新数组
    // var new_arr = arr.slice(5,7);
    // console.log(new_arr);
    // console.log(arr);

    // concat 合并数组
    // var arr01 = ['afe',6,94,'5'];
    // var new_arr = arr.concat(arr01);
    // console.log(arr);
    // console.log(arr01);
    // console.log(new_arr);


    /* - 省份城市的三级联动
     * - 在Web开发中，地区联动是很常见的功能。
     * - 例如，购物、外卖等需要选择填写的送货地址。
     * - 其中，省份城市的三级联动则是最基础的功能。
     * - 接下来利用数组保存相关的省份、城市和地区的信息。
     * - 一维数组provinces保存省、自治区和直辖市。
     * - 二维数组cities保存对应省、自治区和直辖市下的所有城市，存储时要保证cities[index]中index值与对应provinces中元素的下标索引相同。
     * - 同理，利用三维数组保存每个城市下的区域的所有区域。
    */
    var provices = ['河南省', '河北省', '湖南省'];
    var citys = [
      ['郑州市', '开封市', '洛阳市', '许昌市'],
      ['石家庄市', '唐山市', '沧州市'],
      ['长沙市', '张家界市']
    ];
    var areas = [
      [
        ['二七区', '金水区', '高新区'],
        ['龙亭区', '顺河回族区', '禹王台区'],
        ['新安县', '汝阳县'],
        ['禹州市', '魏都区', '长葛市']
      ],
      [
        ['无极县', '赵县'],
        ['乐亭县', '迁西县', '玉田县'],
        ['沧县', '青县', '献县', '吴桥县']
      ],
      [
        ['长沙县'],
        ['慈利县', '桑植县']
      ]
    ];
    var _provices = document.getElementById('provice');
    var _citys = document.getElementById('city');
    var _areas = document.getElementById('area');
    var provice_str = '';

    for (var i in provices) {
      provice_str += '<option value="' + i + '">' + provices[i] + '</option>';
    }
    _provices.innerHTML = provice_str;
    // 加载option后获取省份选中值
    var _provicesVal = _provices.value;

    var city_str_init = '';
    for (var i in citys[_provicesVal]) {
      city_str_init += '<option value="' + i + '">' + citys[_provicesVal][i] + '</option>';
    }
    _citys.innerHTML = city_str_init;
    var _citysVal = _citys.value;

    var area_str_init = '';
    for (var i in areas[_provicesVal][_citysVal]) {
      area_str_init += '<option value="' + i + '">' + areas[_provicesVal][_citysVal][i] + '</option>';
    }
    _areas.innerHTML = area_str_init;

    _provices.onchange = function () {
      _provicesVal = _provices.value;
      // 城市重加载
      var city_str = '';
      for (var i in citys[_provicesVal]) {
        city_str += '<option value="' + i + '">' + citys[_provicesVal][i] + '</option>';
      }
      _citys.innerHTML = city_str;

      _citysVal = _citys.value;
      // 区域重加载
      var area_str = '';
      for (var j in areas[_provicesVal][_citysVal]) {
        area_str += '<option value="' + j + '">' + areas[_provicesVal][_citysVal][j] + '</option>';
      }
      _areas.innerHTML = area_str;
    }

    _citys.onchange = function () {
      _citysVal = _citys.value;
      var area_str = '';
      for (var i in areas[_provicesVal][_citysVal]) {
        area_str += '<option value="' + i + '">' + areas[_provicesVal][_citysVal][i] + '</option>';
      }
      _areas.innerHTML = area_str;
    }
  </script>
</body>

</html>